<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
    <script type="text/javascript" src="../lib/vue/dist/vue.js"></script>
</head>

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .main{
        width: 100%;
        background-color: #6b94ff;
    }
    .head{
        width: 100%;
        height: 80px;
        background-color: purple;

    }
    .main2{
        width: 100%;
        height: 1000px;
    }
    .main2 .aside{
        float: left;
        width: 30%;
        height: 100%;
        background-color: green;
    }
    .main2 .content{
        float: left;
        width: 70%;
        height: 100%;
        background-color: red;
    }



</style>


<body>

<div id="app"></div>

<script>



     Vue.component("VBtn", {

         template:'<button>按钮</button>'

     });




    var Vheader = {

        template:'<div class="head">我是头部 <VBtn/> </div>'

    }

    var Vleft = {


        template:"<div class='aside'>我是左边导航栏 <VBtn/> </div>d"

    }


    var Vright = {


        template:"<div class='content'>我是右侧的内容哦</div>"
    }

    var App = {

        template: `<div class="main">
                <Vheader />
                <div class="main2">

                <Vleft />
                <Vright />

               </div>


         </div>`,
        components: {
            Vheader,
            Vleft,
            Vright
        }
    }





    new Vue({
        el:"#app",
        template: '<App></App>',
        data:function () {
            return{



            }
        },
        components:{

            App

        }

    });




</script>







</body>
</html>